<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标签列表</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
<script type="text/javascript" src="js/base64/base64.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

function ajax(msg) {
	var event = document.createEvent('MessageEvent');
	var origin = window.location.protocol + '//' + window.location.host;
	event.initMessageEvent('MessageReceived', true, true, msg, origin, 1234, window, null);
	document.dispatchEvent(event);
}
// 全局接收消息事件
function messageReceived(res) {
	res = Base64.decode(res);
	res = JSON.parse(res);
	//标签搜索
	if (res.type == "Tags/List") {
		TagsList(res.data);
	}
}

function TagsList(data)
{
	if (data.length != 0) {
		var html = '';
		var result_count = 0;

		for (var i in data) {
			var item = data[i];
			html += '<tr name="' + item['name'] + '" icon="' + item['icon'] + '" indexs="' + item['indexs'] + '">';
		      html += '<td>' + item['name'] + '</td>';
		      html += '<td><img src="' + item['icon'] + '" width="18" height="18" ></td>';
		      html += '<td>' + item['indexs'] + '</td>';
		      html += '<td>' + item['number'] + '</td>';
		      html += '<td><a class="layui-btn layui-btn-xs xedit" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs xdelete" lay-event="del">删除</a></td>';
		    html += '</tr>';

    		result_count++;
		}

		$("#result").html(html);
	}
	else
	{
		$("#result").html('<tr><td style="text-align: center; color: #C0C0C0; font-size: 12px;">没有找到内容，换一个试试</td></tr>');
	}
	dd();
}

</script>
<style type="text/css">
body{ padding: 10px; }
</style>
</head>
<body>
<a href="javascript:ref();" > 刷新列表</a>
<table class="layui-table">
  <thead>
    <tr>
      <th>标签名称</th>
      <th>图标</th>
      <th>排序</th>
      <th>绑定用户</th>
      <th toolbar="barDemo" >操作</th>
    </tr> 
  </thead>
  <tbody id="result">
    	<tr>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td><a class="layui-btn layui-btn-xs xedit" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></td>
    </tr> 
  </tbody>
</table>
</body>
<script type="text/javascript">

	function ref()
	{
		var data_opt = {
				type: "Tags/List",
				data: {
				}
			}
		data_opt = JSON.stringify(data_opt);
		ajax(data_opt);
	}

	ref();

	function dd()
	{
			/*获取选中的id值*/
		$(".xedit").click(function(){
				var name = $(this).parent().parent().attr('name');
				var icon = $(this).parent().parent().attr('icon');
				var indexs = $(this).parent().parent().attr('indexs');
				var data_opt = {
					type: "Tags/Edit",
					data: {
						name :name,
						icon :icon,
						indexs :indexs,
					}
				}
				data_opt = JSON.stringify(data_opt);
				ajax(data_opt);
			});

		$(".xdelete").click(function(){

				var name = $(this).parent().parent().attr('name');
				var data_opt = {
					type: "Tags/Delete",
					data: {
						name :name
					}
				}
				data_opt = JSON.stringify(data_opt);
				ajax(data_opt);
			});
		//xdelete
	}

$(document).ready(function(){

})
</script>

</html>
